import React,{Component,Fragment} from 'react';
//Fragment为占位符，查看页面时可发现标签不存在，其实他是jsx的一个组件（首字母大写）
import './style.css'

class App extends Component{
  //构造函数 最先执行的函数
  constructor(props){
    super(props);//super指的是父类  他调用一次父类
    //定义数据 
    this.state = {//组件状态 存储数据
      inputValue:"",//input内容
      list:['aa','bb']//列表项
    }
  }

  //对应的是onChange={this.handleInputChange}

  // handleInputChange=(e)=>{
  //   console.log(e.target.value)
  //   // console.log(this)
  //   this.setState({inputValue:e.target.value})
  // }

// 对应的是
// onChange={this.handleInputChange.bind(this)}
// onChange={e => this.handleInputChange(e)}
  handleInputChange(e){
    console.log(e.target.value)
    // console.log(this)
    this.setState({inputValue:e.target.value})
  }

  handleCllick(){
      //[...this.state.list]将以前数组的内容list:['aa','bb']展开,与后面拼接生成新的数组
      this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''
      })
  }

  handleItemDelete(index){
    console.log(index)
    //将this.state.list展开放到数组里即拷贝其复给list
    const list = [...this.state.list];
    list.splice(index,1)
    this.setState({list:list})
    //使用this.state.list.splice(index,1)也成功，但不推荐
    //react中有immutatble这个概念：state不允许我们做任何改变
  }

  render(){
    return (
      <Fragment>
          <div >
              {/* 点击事件时要添加bind(this) 否则函数中this会丢失报undefined*/}
              {
                //这个也是注释  引入style.css中inpt 
                //class 会与class类混淆,所以react用className

                //input 输入<h1>标签时不转译，直接变成<h1>标签效果：
                //li使用dangerouslySetInnerHTML={{__html:item}} 属性代替{item}

                //点击lable光标自动聚焦input上:使用htmlFor,而不是for,for会报错
              }
              <label htmlFor="insertArea">标签：</label>
              <input  id="insertArea"
                type="text"  className="inpt"
                placeholder="请输入..."
                value={this.state.inputValue}             
                onChange={this.handleInputChange.bind(this)}
                // onChange={e => this.handleInputChange(e)}
                // onChange={this.handleInputChange}
              />
              <button onClick={this.handleCllick.bind(this)}>提交</button>         
          </div>
          <ul>
            {
              this.state.list.map((item,index)=>{
                  return (
                          <li key={index}
                              onClick={this.handleItemDelete.bind(this,index)}  
                              dangerouslySetInnerHTML={{__html:item}} 
                          >
                            {/*{item}*/}                                             
                          </li>
                        )
              })
            }
          </ul>
      </Fragment>    
    );
  } 
}


/********************************************* 
import React from 'react';
//用到jsx语法时要引入React
//下面的返回的dom标签是jsx语法(在js里面写html标签就是jsx语法)
//无状态组件
function App() {
  return (//不带括号也可以但最外有标签包围，前无注释
    // jsx
    <div className="App">
      Hello World ! 
    </div>    
  );
}
*******************************************/
// import React from 'react';
// class App extends React.Component{
//   render(){
//     return (
//       <div className="App">
//         类App集成了React下面的Component这个类<br/>
//         故App是React的组件了
//       </div>
//     );
//   }
// }

/**************************************** */

// import React,{Component} from 'react';
// class App extends Component{
//   render(){
//     return (
//       <div className="App">
//         Es6结构赋值
//       </div>
//     );
//   }
// }

// import {Component} from 'react';
// 等价于
// import react from 'react';
// const Component = React.Component

/************************************************/

export default App;
